<div id="graph">Loading...</div>
<?php $outdata = '' ?>
<?php $colors = array() ?>
<?php $count = count($outdata) ?>
<?php if(count($data) == 0) echo 'no results found' ?>
<?php foreach($data as $k => $one){ ?>
<?php //$colors_arr[] = globals::getRandomColorHex(); ?>
<?php $out = number_format($one[0], 1) ?>
    <?php $outdata.= "['{$one[1]}', {$out}],"?>
<?php } ?>
<?php $outdata = substr($outdata, 0, strlen($outdata)-1); ?>
<?php //$colors_arr = array('FF0D00','FF8900','FFD200','FFFD00','BAF300','3BDA00','009999','123EAB','7109AA','D30068') ?>
<script type="text/javascript">
	
    var _data = [<?php echo $outdata ?>];
    var myChart = new JSChart('graph', 'bar');
    <?php if(0){ ?>
  //  var _colors = ['<?php foreach($data as $k => $one) { $colors[] = "#".$colors_arr[$k]; } echo implode('\',\'',$colors) ?>'];    
    <?php foreach($data as $k => $one) { ?>
        myChart.setLegend('#<?php echo $colors_arr[$k] ?>', '<?php echo $one[1] ?>');
    <?php } ?>
    myChart.setDataArray(_data);
    myChart.colorize(_colors);
    myChart.setSize(1000, 600);
    myChart.setTitle('');
    myChart.setTitleFontFamily('Times New Roman');
    myChart.setTitleFontSize(14);
    myChart.setTitleColor('#0F0F0F');
    myChart.setPieRadius(300);
    myChart.setPieValuesColor('#FFFFFF');
    myChart.setPieValuesFontSize(12);
    myChart.setPiePosition(350, 280);
    myChart.setShowXValues(false);
    myChart.setLegendShow(true);
    myChart.setLegendFontFamily('Verdana');
    myChart.setLegendFontSize(15);
    myChart.setLegendPosition(750, 20);
    myChart.setPieAngle(40);
    myChart.set3D(true);
    myChart.draw();
    <?php } ?>
   /////////////////
   
        myChart.setTooltipFontSize(30);
	myChart.setDataArray(_data);
	myChart.setTitle('نسبة المتدربين المرشحين في المدارس المختارة');
	myChart.setTitleFontSize(20);
	myChart.setTitleFontFamily('Tahoma');
	myChart.setTitleColor('#8E8E8E');
	myChart.setAxisNameX('');
	myChart.setAxisNameY('');
	myChart.setAxisNameFontSize(20);
	myChart.setLabelFontSize(20);
	myChart.setAxisNameColor('#999');
	myChart.setAxisValuesAngle(40);
	myChart.setAxisValuesColor('#777');
	myChart.setAxisColor('#B5B5B5');
	myChart.setAxisWidth(1);
	myChart.setBarValuesColor('#2F6D99');
	myChart.setAxisPaddingTop(60);
	myChart.setAxisPaddingBottom(200);
	myChart.setAxisPaddingLeft(130);
	myChart.setBarColor('#2D6B96', 1);
//	myChart.setBarColor('#9CCEF0', 2);
	myChart.setBarBorderWidth(0);
	myChart.setBarSpacingRatio(50);
	myChart.setBarOpacity(0.9);
        myChart.setAxisValuesFontSize(13);
        myChart.setAxisValuesFontFamily('Tahoma');
	myChart.setFlagRadius(6);
//	myChart.setTooltip(['North America', 'Click me', 1], callback);
	myChart.setTooltipPosition('nw');
	myChart.setTooltipOffset(3);
	myChart.setLegendShow(false);
	myChart.setLegendPosition('right top');
	myChart.setSize(1000, 600);
	myChart.setGridColor('#C6C6C6');
	myChart.setLabelFontFamily('Tahoma');
	myChart.draw();
        
        
        
</script>